<template>
  <div>
    <Dialog
      v-model="visible"
      title="项目详情"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="closeDialog"
      width="618"
    >
      <div>
        <div class="basic-information">基础信息</div>
        <div class="detail_cont">
          <div>项目编码：</div>
          <div>{{ formData.form.projectCode }}</div>
        </div>
        <div class="detail_cont">
          <div>项目名称：</div>
          <div>{{ formData.form.projectName }}</div>
        </div>
        <div class="detail_cont">
          <div>交付经理：</div>
          <div>{{ formData.form.projectManagerName }}</div>
        </div>
        <div class="detail_cont">
          <div>所属地市：</div>
          <div>{{ formData.form.region }}</div>
          <!-- <el-row :gutter="10">
            <el-col :span="24">
              <el-tag effect="light" class="mr-5px mb-5px">{{ formData.form.region }} </el-tag>
            </el-col>
          </el-row> -->
        </div>
        <div class="detail_cont mb-10px">
          <div style="line-height: 22px">项目标签：</div>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-tag
                effect="light"
                v-for="label in formData.form.optionLabel"
                :key="label"
                class="mr-5px mb-5px"
                >{{ typeRelate(label) }}
              </el-tag>
            </el-col>
          </el-row>
        </div>
        <div class="basic-information">附件信息</div>
        <el-alert
          v-if="formData.form.filetipShow"
          class="mb-8"
          title="文件存在涉敏信息，请做好保密工作！"
          type="warning"
          show-icon
          :closable="false"
        />
        <el-row v-if="formData.form.filetipShow" :gutter="20">
          <el-col :span="18" v-for="file in formData.form.files" :key="file.doc_id">
            <div class="file_style">
              <div class="flex">
                <img
                  class="mr-10px"
                  :src="fileIconObj[file.suffix] || fileIconObj.unknow"
                  width="35px"
                />
                <div class="overflow-hidden">
                  <div class="font-14 file_title" :title="file.file_name">{{ file.file_name }}</div>
                  <div class="font-12" style="font-size: 12px">{{ file.file_type }}</div>
                  <!-- <el-tag size="small" effect="plain" round type="success">
                {{ file.file_type }}
              </el-tag> -->
                </div>
              </div>
              <div class="flex ml-45px mt-10px">
                <div
                  v-if="previewableTypes.includes(file.suffix)"
                  class="mr-20px color-#437BC7"
                  style="cursor: pointer"
                  @click="previewFile(file)"
                  >在线预览</div
                >
                <div class="color-#437BC7" style="cursor: pointer" @click="downloadFile(file)"
                  >下载</div
                >
              </div>
            </div>
          </el-col>
        </el-row>
        <div v-else class="ml-40px mb-10px">暂无</div>
      </div>
    </Dialog>
    <el-dialog
      :title="filePreviewName"
      v-model="isPreviewOpen"
      :style="{ height: '100vh', margin: '0 auto', padding: 0 }"
      width="70%"
    >
      <iframe v-if="pdfUrl" :src="pdfUrl" style="width: 100%; height: 85vh"></iframe>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { formatTime } from '@/utils'
import { staticData } from '@/views/project/mixins/staticDataMixin'
import * as KmsApi from '@/api/project/kms'
import * as IctApi from '@/api/project/ict'

// 静态变量
const { fileIconObj, previewableTypes } = staticData()
// 控制预览文件模态框展示
const isPreviewOpen = ref(false)
const pdfUrl = ref('')
const filePreviewName = ref('')

const formData = reactive({
  form: {
    projectCode: '',
    projectName: '',
    projectManagerName: '',
    region: '',
    optionLabel: [],
    files: [],
    filetipShow: false
  }
})
const formRef = ref() // 表单 Ref
const props = defineProps({
  visible: Boolean,
  editData: {
    type: Object
  }
})
// 标签字段映射
const typeRelate = (itemValue) => {
  const match = formData.form.optionTag.find((t) => t.value === itemValue)
  return match ? match.label : itemValue
}
const editVal = ref()
const emit = defineEmits(['update:visible'])
const visible = computed({
  get: () => {
    return props.visible
  },
  set: (val) => {
    emit('update:visible', val)
  }
})

watch(
  () => props.visible,
  (val) => {
    if (val) {
      // formData.form = props.editData
      formData.form = { ...props.editData } // 使用浅拷贝来避免直接修改
      formData.form.optionLabel = formData.form.tags.split(',')
      if (props.editData.files) {
        getProjectDocInfo()
      }
    }
  },
  { immediate: true }
)

// 获取项目文档信息
const getProjectDocInfo = () => {
  const params = {
    project_code: formData.form.projectCode
  }
  KmsApi.getProjectDocInfo(params).then((res) => {
    formData.form.files = formData.form.files
      .map((fileId) => {
        const match = res.find((item) => item.doc_id.includes(fileId))
        return match
      })
      .filter((item) => item !== undefined)
    if (formData.form.files.length === 0) {
      formData.form.filetipShow = false
    } else {
      formData.form.filetipShow = true
    }
  })
}

// 下载附件
const downloadFile = (file) => {
  const params = {
    doc_id: file.doc_id,
    is_preview: false
  }
  KmsApi.previewAndDownloadFile(params).then((res) => {
    const downloadFileName = file.file_name
    const blobData = new Blob([res])
    const fileUrl = URL.createObjectURL(blobData)
    const link = document.createElement('a')
    link.href = fileUrl
    link.setAttribute('download', downloadFileName)
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
    URL.revokeObjectURL(fileUrl)
  })
}

// 预览附件
const previewFile = (file) => {
  const params = {
    doc_id: file.doc_id,
    is_preview: true
  }
  KmsApi.previewAndDownloadFile(params).then((res) => {
    filePreviewName.value = file.file_name
    const blobPDF = new Blob([res], { type: 'application/pdf' })
    // pdfUrl.value = URL.createObjectURL(blobPDF);
    pdfUrl.value = '/pdfjs/web/viewer.html?file=' + window.URL.createObjectURL(blobPDF)
    isPreviewOpen.value = true
  })
}

/** 取消 */
const closeDialog = () => {
  visible.value = false
}
</script>
<style scoped>
.basic-information {
  background-color: rgba(0, 117, 252, 0.1);
  padding: 10px 20px;
  margin-bottom: 10px;
}

:deep(.el-input.is-disabled .el-input__inner),
:deep(.el-select__wrapper.is-disabled),
:deep(.el-select__wrapper.is-disabled .el-tag),
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  cursor: auto;
}

.detail_cont {
  display: flex;
  font-size: 14px;
  color: #605757;
  margin-bottom: 10px;
  line-height: 25px;
}

.detail_cont > div:first-child {
  min-width: 70px;
  margin-left: 20px;
  color: #000;
  text-align: right;
}

.identity_style:hover {
  opacity: 0.8;
}

.file_style {
  border: 1px solid var(--el-border-color);
  padding: 10px;
  margin-top: 10px;
}

.file_title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>